<template lang="pug">
.chartIndicators-wrapper
  h6 分区绩效指标
  ul.indicator-list
    //- li
    //-   span 分区：
    //-   span {{kpi.name | nullValue('')}}
    li
      span.li-key 分区供水量
      span.li-value {{kpi.dws | nullValue(' m³')}}
    li
      span.li-key 大用户用水量
      span.li-value {{kpi.lucw | nullValue(' m³')}}
    li
      span.li-key 平均压力
      span.li-value {{kpi.avgPressure||kpi.avgPressure===0?(kpi.avgPressure*100).toFixed(3)+'m':'** m'}}
    li
      span.li-key 产销差水量
      span.li-value {{kpi.nrw| nullValue(' m³')}}
    li
      span.li-key 产销差比率
      span.li-value {{kpi.nrwRate| nullValue(' %')}}
</template>
<script>
/**
 * @name PartionInfo 分区绩效指标
 * @author 王锐锋 <wangrf@gddxit.com>
 * @description 展示分区绩效指标
 *参数：
 */
export default {
  props: {
    areaId: Number,
    timeRange: Array
  },
  data () {
    return {
      kpi: {
        name: '**',
        lucw: null,
        dws: null,
        nrwRate: null
      }
    }
  },
  filters: {
    nullValue (val, unit) {
      return val || val === 0 ? (parseFloat(val).toFixed(3) + unit) : '**' + unit
    }
  },
  methods: {
    getData () {
      this.$get({
        url: `/pn/dpa/monitor/kpi`,
        params: {
          'areaId': this.areaId,
          'startTime': this.timeRange[0].getTime(),
          'endTime': this.timeRange[1].getTime()
        }
      }).then((res) => {
        const kpi = res.data.find(({id}) => id === this.areaId)
        this.kpi = kpi
      })
    }
  }
}
</script>

<style lang="sass" scoped>
.chartIndicators-wrapper
  width: 100%
  height: 100%
  background-color: #fff
  padding: 10px 20px
  display: flex
  flex-direction: column
  h6
    font-weight: bold
    font-size: 18px
    text-align: center
    margin-bottom: 13px
    margin-top: 0
    overflow: hidden
  .indicator-list
    width: 100%
    height: 85%
    display: flex
    flex-direction: column
    li
      border-radius: 5px
      background-color: #f7f7f7
      margin-bottom: 12px
      flex: 1
      display: flex
      align-items: center
      justify-content: space-between
      padding: 0 20px
      .li-key
        font-size: 1em
        font-weight: bold
      .li-value
        width: 100px
        height: 27px
        border-radius: 5px
        text-align: center
        color: #fff
        background-color: #1cb1fa
</style>
